<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            color:red
        }


    </style>
</head>

<body>
  
    <div id="app">
        <header>
            
        </header>
     <div>
        <span v-for="(item, index) in arr" :key="index" @click="changeActive(index)" :class="[index==activeIndex?'active':'']">{{item.tit}}</span>
     </div>
     <div v-for="(item, index) in arr[activeIndex].con" :key="index">
         <h3>{{item.title}}</h3>
         <h3>{{item.name}}</h3>
     </div>
     <hr>
     <p>{{lastname}}{{firstname}}</p>
     <p>{{name1}}</p>

     <footer></footer>
    </div>
 
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        var app = new Vue({
            el: '#app', // 讲#app挂载，即他所有的子节点可以使用vue得方法和属性
            data: {    // 在vue中生命变量得地方
               arr:[
                   {
                       tit:"标题1",
                       con:[
                           {
                               title:"adasdasdasdasdasd",
                               name:"dsadasdasdasdasdasd"
                           },
                           {
                               title:"adasdasdasdasdasd",
                               name:"dsadasdasdasdasdasd"
                           },
                           {
                               title:"adasdasdasdasdasd",
                               name:"dsadasdasdasdasdasd"
                           },
                       ]
                   },
                   {
                       tit:"标题2",
                       con:[
                           {
                               title:"2adasdasdasdasdasd",
                               name:"dsadasdasdasdasdasd"
                           },
                           {
                               title:"2adasdasdasdasdasd",
                               name:"2dsadasdasdasdasdasd"
                           },
                           {
                               title:"2adasdasdasdasdasd",
                               name:"2dsadasdasdasdasdasd"
                           },
                       ]
                   },
                   {
                       tit:"标题3",
                       con:[
                           {
                               title:"3adasdasdasdasdasd",
                               name:"3dsadasdasdasdasdasd"
                           },
                           {
                               title:"3adasdasdasdasdasd",
                               name:"3dsadasdasdasdasdasd"
                           },
                           {
                               title:"3adasdasdasdasdasd",
                               name:"3dsadasdasdasdasdasd"
                           },
                       ]
                   },
               ],
               activeIndex:0,
               lastname:"赵",
               firstname:"志豪"
            },
            methods: { //定义方法的
                changeActive(ind) {
                    console.log(ind)
                    this.activeIndex = ind
                },
            },
            computed: { // computed 是vue封装得一个计算属性，当一个变量依赖于多个变量得时候使用
                name1 () {
                    return this.lastname + this.firstname
                },
            },
        })
    </script>
</body>

</html>